<template>
  <div class="for_details">
    <div class="for_details_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">待收货<i class="el-icon-close"></i></div>
    </div>
    <div class="for_details_title">
      <div class="for_details_title_left">待收货/<i>订单详情</i></div>
      <div class="for_details_title_right">
        <button class="for_details_title_right_btn" @click="handerBase">
          返回
        </button>
      </div>
    </div>
    <div class="for_details_content">
      <!-- 进度条 -->
      <div class="for_details_content_top">
        <div class="process">
          <div class="progress"><div class="progress_box"></div></div>
          <div class="process_num">
            <div class="process_num_box"><div class="round">1</div></div>
            <div class="process_num_title">
              买家下单
              <div
                v-if="orderInfoData.create_time"
                class="process_num_title_text"
              >
                {{ orderInfoData.create_time | dateformat("YYYY-MM-DD") }}
                <div>
                  {{ orderInfoData.create_time | dateformat("HH:mm:ss") }}
                </div>
              </div>
            </div>
          </div>
          <div class="process_num">
            <div class="process_num_box"><div class="round">2</div></div>
            <div class="process_num_title">
              买家付款
              <div v-if="orderInfoData.pay_time" class="process_num_title_text">
                {{ orderInfoData.pay_time | dateformat("YYYY-MM-DD") }}
                <div>{{ orderInfoData.pay_time | dateformat("HH:mm:ss") }}</div>
              </div>
            </div>
          </div>
          <div class="process_num">
            <div class="process_num_box"><div class="round">3</div></div>
            <div class="process_num_title">
              商家发货
              <div
                v-if="orderInfoData.send_time"
                class="process_num_title_text"
              >
                {{ orderInfoData.send_time | dateformat("YYYY-MM-DD") }}
                <div>
                  {{ orderInfoData.send_time | dateformat("HH:mm:ss") }}
                </div>
              </div>
            </div>
          </div>
          <div class="process_num">
            <div class="process_num_box">
              <div class="round round_active">4</div>
            </div>
            <div class="process_num_title">
              订单完成
              <div
                v-if="orderInfoData.finish_time"
                class="process_num_title_text"
              >
                {{ orderInfoData.finish_time | dateformat("YYYY-MM-DD") }}
                <div>
                  {{ orderInfoData.finish_time | dateformat("HH:mm:ss") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="for_details_content_center">
        <div class="for_details_content_center_left">
          <div class="top">
            <div class="for_details_content_center_left_box">
              <div class="left">订单编号：</div>
              <div class="right">{{ orderInfoData.order_code }}</div>
            </div>
            <div class="for_details_content_center_left_box">
              <div class="left">付款方式：</div>
              <div class="right">
                {{
                  orderInfoData.pay_type == "1"
                    ? "微信支付"
                    : orderInfoData.pay_type == "2"
                    ? "线下付款"
                    : ""
                }}
              </div>
            </div>
            <div class="for_details_content_center_left_box">
              <div class="left">买家：</div>
              <div class="right right_active">{{ orderInfoData.name }}</div>
            </div>
            <div class="for_details_content_center_left_box">
              <div class="left">配送方式：</div>
              <div class="right">
                {{
                  orderInfoData.move_way == "1"
                    ? "快递"
                    : orderInfoData.move_way == "2"
                    ? "自提"
                    : ""
                }}
              </div>
            </div>
            <div class="for_details_content_center_left_box">
              <div class="left">收货人：</div>
              <div class="right" id="content">
                {{ orderInfoData.province }} {{ orderInfoData.city }}
                {{ orderInfoData.area }} {{ orderInfoData.address }}
                {{ orderInfoData.name }} {{ orderInfoData.mobile }}
              </div>
              <font
                class="copyConsignee"
                data-clipboard-target="#content"
                @click="copyConsignee"
                >复制</font
              >
            </div>
          </div>
          <div class="botton">
            <!-- <div class="botton_btn">修改订单收货信息</div> -->
          </div>
        </div>
        <div class="for_details_content_center_right">
          <div class="for_details_content_center_right_top">
            订单状态：<font>待收货</font
            ><i>（商家已发货，等待买家收货并交易完成）</i>
          </div>
          <div class="expressBox">
            <div
              class="for_details_content_center_right_logistics"
              v-for="(item, index) in orderInfoData.send_data"
              :key="index"
            >
              <div class="packageBox">{{ item.send_name }}</div>
              <div class="for_details_content_center_right_logistics_top">
                快递公司：<i>{{ item.express_name }}</i>
              </div>
              <div class="for_details_content_center_right_logistics_center">
                快递单号：<i>{{ item.courier_num }}</i>
              </div>
              <div class="for_details_content_center_right_logistics_bottom">
                发货时间：<i>{{
                  $moment(item.send_time * 1000).format("yyyy-MM-DD HH:mm:ss")
                }}</i>
              </div>
            </div>
          </div>
          <!-- <div class="for_details_content_center_right_center">
						<button class="delivery">确认发货</button>
						<div class="delivery_text">
							<i>修改物流</i><i>取消发货</i><i>修改佣金</i><i>添加备注</i>
						</div>
					</div> -->
          <!-- <div class="for_details_content_center_right_botton">
						友情提示：请及时关注物流状态，确保买家及时收到商品，如果买家未及时收到货物或有退换货请求，请及时联系买家妥善处理;
					</div> -->
        </div>
        <!-- <div class="for_details_content_center_text">
					一级分销商
					<div class="for_details_content_center_text_title">
						<div class="for_details_content_center_text_title_box">
							<div class="for_details_content_center_text_title_box_left">姓名：</div>
							<div class="for_details_content_center_text_title_box_right text_active">未填写<i>?</i></div>
						</div>
						<div class="for_details_content_center_text_title_box">
							<div class="for_details_content_center_text_title_box_left">手机号：</div>
							<div class="for_details_content_center_text_title_box_right"></div>
						</div>
						<div class="for_details_content_center_text_title_box">
							<div class="for_details_content_center_text_title_box_left">佣金：</div>
							<div class="for_details_content_center_text_title_box_right">2</div>
						</div>
					</div>
				</div> -->
      </div>
      <h3 class="table_text">商品信息</h3>
      <div class="for_details_content_bottom">
        <table>
          <tr>
            <th style="width: 20%">商品标题</th>
            <th style="width: 19%">规格、编号、条码</th>
            <th style="width: 11%">单价</th>
            <th style="width: 11%">数量</th>
            <th style="width: 13%">原价</th>
            <th style="width: 13%">折扣后</th>
            <th style="width: 13%">状态</th>
          </tr>
          <tr v-for="(v, i) in orderInfoData.product_lst" :key="i">
            <td style="width: 20%">
              <div class="tab_img">
                <img
                  class="tab_img"
                  style="border: 0"
                  :src="v.main_imgurl"
                  alt=""
                />
              </div>
              <div class="tab_right">
                <div class="tab_right_title">{{ v.product_title }}</div>
                <!-- <div class="tab_right_invoice">支持开票</div> -->
              </div>
            </td>
            <td class="td_active" style="width: 19%">
              <div class="tab_box">
                <div class="tab_box_content">
                  规格：
                  <template v-if="v.attr_params && v.attr_params.length">
                    <p
                      class="tab_spec"
                      v-for="(item, index) in v.attr_params"
                      :key="index"
                    >
                      <i>{{ item.value }}</i>
                    </p>
                  </template>
                  <template v-else>无</template>
                </div>
                <div class="tab_box_content">
                  编码：{{ v.specss ? v.specss : " 无" }}
                </div>
                <div class="tab_box_content">
                  条码：{{ v.specsss ? v.specsss : " 无" }}
                </div>
              </div>
            </td>
            <td style="width: 11%">￥{{ v.price }}</td>
            <td style="width: 11%">{{ v.num }}个</td>
            <td style="width: 13%">￥{{ v.primary_price }}</td>
            <td style="width: 13%">￥{{ v.pay_price }}</td>
            <td style="width: 13%">
              {{
                v.order_status == "1"
                  ? "待付款"
                  : v.order_status == "2"
                  ? "待发货"
                  : v.order_status == "3"
                  ? "待收货"
                  : v.order_status == "4"
                  ? "已完成"
                  : "已关闭"
              }}
            </td>
            `
          </tr>
        </table>
        <div class="price">
          <div class="price_box">
            <div class="price_box_left">商品小计：</div>
            <div class="price_box_right">￥{{ orderInfoData.price }}</div>
          </div>
          <div class="price_box">
            <span class="price_box_left">运费：</span>
            <span class="price_box_right"
              >￥{{ orderInfoData.move_price }}</span
            >
          </div>
          <div class="price_box">
            <div class="box-left">
              <span class="price_box_left price_active">总价：</span>
              <span class="price_box_right price_active"
                >￥{{ orderInfoData.price }}</span
              >
            </div>
            <div class="box-center">
              <span class="price_box_left price_active">已付定金：</span>
              <span class="price_box_right price_active"
                >￥{{ orderInfoData.deposit_price }}</span
              >
            </div>
            <div class="box-right" v-if="orderInfoData.is_many_way == 1">
              <span class="price_box_left price_active">待付尾款：</span>
              <span class="price_box_right price_active"
                >￥{{ orderInfoData.balance_price }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ClipboardJS from "clipboard";

export default {
  data() {
    return {
      total: 0.0, // 实付款
      freight: 0.0, // 运费
      subtotal: 0.0, // 小计
      changePrice: 0.0, // 卖家改价
      completedList: [],
      orderInfoData: [],
      orderType: "", //订单类型 productPack-产品包订单
    };
  },
  mounted() {
    this.orderType = this.$route.query.type;
    this._getOrderInfo();
  },
  methods: {
    handerBase() {
      this.$router.go(-1);
    },
    // 实现复制功能
    copyConsignee() {
      // 括号中的内容：对应复制按钮的class
      let clipboard = new ClipboardJS(".copyConsignee");
      let that = this;
      clipboard.on("success", function (e) {
        that.$message.success("复制成功");
        console.log("复制成功");
        e.clearSelection();
      });
      clipboard.on("error", function (e) {
        console.log("复制失败，请重试");
        console.log(e);
      });
    },

    //获取传过来的order_id，获取商品详情
    _getOrderInfo() {
      console.log(this.$route);
      let order_id = this.$route.query.order_id;
      let store_id = localStorage.getItem("sid");
      let url = this.orderType == 'productPack'?'/api/admin/newpk/PackOrder/detail':'/api/admin/shop/productOrder/detail';
      this.$http
        .post(url, { order_id, store_id })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.orderInfoData = res.data ? res.data : [];
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
  },
  // computed: {
  // 	// 商品小计
  // 	subtotalPrice() {
  // 		this.completedList.filter(v => {
  // 			this.subtotal += v.price;
  // 		});
  // 		return `${this.subtotal}.00`;
  // 	},
  // 	// 运费
  // 	freightPrice() {
  // 		this.completedList.filter(v => {
  // 			this.freight += v.freight;
  // 		})
  // 		return `${this.freight}.00`
  // 	},
  // 	// 卖家改价
  // 	changePrices() {
  // 		for(let i=0;i<this.completedList.length;i++) {
  // 			this.changePrice += this.completedList[i].prices - this.completedList[i].pricess;
  // 		}
  // 		return `${this.changePrice}.00`;
  // 	},

  // 	// 实付款
  // 	totalPrice() {
  // 		this.completedList.filter(v => {
  // 			this.total += v.pricess;
  // 		});
  // 		return `${this.total}.00`;
  // 	},
  // },
};
</script>

<style lang="less" scoped="scoped">
@import "details.less";
</style>
